<template>
	<div class="video" @mousemove="enterFn" @click="handleClick">
		<video
			:src="srcData.src"
			autoplay
			ref="myVideo"
			preload="auto"
			@canplay="canplayFn"
		></video>
		<div class="control" v-show="isShowControl">
			<div class="process" id="process">
				<input
					@click.stop=""
					style="width: 100%"
					type="range"
					id="myinput"
					@mousedown.stop="mousemove"
					@mouseup.stop="mouseupFn"
					@input="myInput"
					value="0"
					min="0"
					step="any"
					max="100"
				/>
				<!-- <div
					class="current"
					id="current"
					:style="{ width: parseInt((videoCurrentTime / videoAllTime) * 100) + '%' }"
				></div> -->
			</div>
			<div :class="isPlay ? 'pause' : 'play'" @click="handleClick"></div>
			<div style="margin-left: 20px">
				{{ formMata(videoCurrentTime) }}/{{ formMata(videoAllTime) }}
			</div>
		</div>
	</div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { getQuery } from "../utils/index.js";
import { getCurrentInstance, ref, onMounted } from "vue"; // 引入全局
const store = useStore();
const route = useRoute();
const srcData = getQuery();
let refs = null;
let isPlay = ref(true);
let isShowControl = ref(true);
let timer;
let videoAllTime = ref(null);
let videoCurrentTime = ref(0);
let upTime;
let val = ref(0);
let formMata = (time) => {
	let mm = parseInt(time / 60)
		.toString()
		.padStart(2, "0");
	let ss = parseInt(time % 60)
		.toString()
		.padStart(2, "0");
	return mm + ":" + ss;
};

// console.log(route.params.src);
const handleClick = () => {
	isPlay.value = !isPlay.value;
	if (isPlay.value) {
		refs.myVideo.play();
		updateTime();
	} else {
		refs.myVideo.pause();
		clearInterval(upTime);
	}
};

const enterFn = () => {
	isShowControl.value = true;
	if (timer) {
		clearTimeout(timer);
		timer = null;
	}
	timer = setTimeout(() => {
		isShowControl.value = false;
	}, 1000);
};

let myInput = (e) => {
	refs.myVideo.currentTime = (e.target.value / 100) * refs.myVideo.duration;
	clearInterval(upTime);
};
let mouseupFn = (e) => {
	refs.myVideo.play();
	updateTime();
	isPlay.value = true
};
const updateTime = () => {
	upTime = setInterval(() => {
		if (refs.myVideo?.currentTime) {
			val.value = (refs.myVideo.currentTime / refs.myVideo.duration) * 100;
			videoCurrentTime.value = refs.myVideo.currentTime;
			document.getElementById("myinput").value = val.value;
		}
	}, 60);
};

const canplayFn = () => {
	videoAllTime.value = refs.myVideo.duration;
	if (refs.myVideo.currentTime) videoCurrentTime.value = refs.myVideo.currentTime;

	updateTime();
};
const mousemove = (e) => {
	refs.myVideo.pause();
	clearInterval(upTime);
};

onMounted(() => {
	let { $refs } = getCurrentInstance().proxy;
	refs = $refs;
});
</script>

<style lang="scss" scoped>
.video {
	width: 800px;
	height: 600px;
	margin: auto;
	position: relative;
	video {
		width: 100%;
		height: 100%;
		object-fit: fill;
		background-color: black;
	}
	.control {
		position: absolute;
		left: 0;
		bottom: 0;
		color: white;
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
		.play {
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-left-color: white;
			display: block;
			margin-left: 20px;
			cursor: pointer;
		}
		.pause {
			width: 6px;
			height: 20px;
			background-color: white;
			margin-left: 20px;
			border-radius: 4px;
			position: relative;
			cursor: pointer;
			&::after {
				content: "";
				width: 6px;
				height: 20px;
				background-color: white;
				position: absolute;
				border-radius: 4px;
				top: 0;
				left: 10px;
			}
		}
		.process {
			position: absolute;
			width: 90%;
			height: 4px;

			bottom: 60px;
			left: 50%;
			transform: translateX(-50%);
			box-sizing: border-box;
			border-radius: 2px;
		}
	}
}

input[type="range"]:focus {
	/*清除点击时的input边框*/
	outline: none;
	height: 6px;
}
</style>
